<template>
    <div class="color-input">
        <i-input class="input" v-model="_colorValue" placeholder="填写颜色"></i-input>
        <i-color-picker v-model="_colorValue" recommend></i-color-picker>
    </div>
</template>
<script>
import Match from '@/utils/match'
export default {
    props: ['colorValue'],
    computed: {
        _colorValue: {
            get() {
                return this.colorValue
            },
            set(value) {
                if (Match.matchColor({ color: value }) || value === '') {
                    this.$emit('update:colorValue', value)
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.color-input {
    display: flex;
    align-items: center;
}
</style>


